<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'详情'}"></three-title>
    <div class="layerRtb-scroll thinScroll flexBox" v-scrollHeight = "10">
        <div v-if="flag === 1" style="width:100%;height:100%">
            <el-carousel indicator-position="outside" height="600px" :autoplay="false" >
                <el-carousel-item v-for="item in data" :key="item" >
                    <rx-viewer :images="item" class="fl ml10">
                        <div class="clearfix">
                            <div class="imgBox">
                                <img :src="item">
                            </div>
                        </div>
                    </rx-viewer>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div v-if="flag === 2" style="width:100%;height:100%">
            <iframe :src="data" frameborder="0" width="100%" height="100%"></iframe>
        </div>
    </div>
</div>
</template>
<script>
export default {
    data () {
        return {
            data: [],
            flag: '' // 标识
        }
    },
    created () {
        this.data = this.$route.query.data
        this.flag = this.$route.query.flag
    },
    methods: {

    },
    watch: {
        $route () {
            this.data = []
            this.data = this.$route.query.data
            this.flag = this.$route.query.flag
        }
    }
}
</script>
<style lang="scss" scoped>
    .flexBox {
        display: flex;
        align-items: center;
        .el-carousel{
            width: 100%
        }
    }
    .imgBox img {
        width:100%;
        height:600px;
    }
</style>
